<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置满减活动</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-purple-500 to-pink-500 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="b2b-marketing.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">设置满减活动</h1>
                <button onclick="viewTemplates()" class="text-white hover:opacity-80">
                    <i class="fas fa-list text-lg"></i>
                </button>
            </div>
        </div>

        <!-- Content -->
        <div class="h-[calc(852px-160px)] overflow-y-auto pb-4">
            <form id="fullReductionForm">
                <!-- Activity Basic Info -->
                <div class="bg-white border-b border-gray-200">
                    <div class="px-4 py-4">
                        <h3 class="font-medium mb-4 flex items-center">
                            <i class="fas fa-gift text-purple-500 mr-2"></i>
                            活动基本信息
                        </h3>
                        
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">活动名称</label>
                                <input type="text" id="activityName" placeholder="请输入满减活动名称" 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                            </div>
                            
                            <div class="grid grid-cols-2 gap-3">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">开始时间</label>
                                    <input type="datetime-local" id="startTime" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">结束时间</label>
                                    <input type="datetime-local" id="endTime" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                </div>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">活动描述</label>
                                <textarea id="description" rows="3" placeholder="请输入活动描述，如活动亮点、参与说明等"
                                          class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent resize-none"></textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Discount Rules -->
                <div class="bg-white border-b border-gray-200">
                    <div class="px-4 py-4">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="font-medium flex items-center">
                                <i class="fas fa-calculator text-blue-500 mr-2"></i>
                                满减规则
                            </h3>
                            <button type="button" onclick="addDiscountRule()" 
                                    class="bg-purple-100 text-purple-600 text-sm px-3 py-1 rounded-lg hover:bg-purple-200 transition-colors">
                                添加阶梯
                            </button>
                        </div>
                        
                        <div id="discountRules" class="space-y-3">
                            <!-- Default rule -->
                            <div class="discount-rule bg-gray-50 rounded-lg p-3 border border-gray-200">
                                <div class="flex items-center justify-between mb-3">
                                    <span class="text-sm font-medium text-gray-700">第1阶梯</span>
                                    <button type="button" onclick="removeDiscountRule(this)" class="text-red-500 hover:text-red-700 text-sm" style="display: none;">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                                <div class="grid grid-cols-2 gap-3">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">满足金额</label>
                                        <div class="flex items-center">
                                            <span class="text-sm text-gray-600 mr-1">¥</span>
                                            <input type="number" class="min-amount flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" 
                                                   min="0" step="0.01" placeholder="99" onchange="updatePreview()">
                                        </div>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">减免金额</label>
                                        <div class="flex items-center">
                                            <span class="text-sm text-gray-600 mr-1">¥</span>
                                            <input type="number" class="discount-amount flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" 
                                                   min="0" step="0.01" placeholder="10" onchange="updatePreview()">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mt-3 text-xs text-gray-500">
                            <i class="fas fa-info-circle mr-1"></i>
                            添加多个阶梯可实现更复杂的满减规则，如满99减10，满199减25等
                        </div>
                    </div>
                </div>

                <!-- Activity Scope -->
                <div class="bg-white border-b border-gray-200">
                    <div class="px-4 py-4">
                        <h3 class="font-medium mb-4 flex items-center">
                            <i class="fas fa-store text-green-500 mr-2"></i>
                            活动范围
                        </h3>
                        
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">适用商品</label>
                                <div class="space-y-2">
                                    <label class="flex items-center text-sm">
                                        <input type="radio" name="productScope" value="all" checked class="mr-2">
                                        <span class="text-gray-700">全部商品</span>
                                    </label>
                                    <label class="flex items-center text-sm">
                                        <input type="radio" name="productScope" value="category" class="mr-2">
                                        <span class="text-gray-700">指定分类</span>
                                    </label>
                                    <label class="flex items-center text-sm">
                                        <input type="radio" name="productScope" value="specific" class="mr-2">
                                        <span class="text-gray-700">指定商品</span>
                                    </label>
                                    <label class="flex items-center text-sm">
                                        <input type="radio" name="productScope" value="brand" class="mr-2">
                                        <span class="text-gray-700">指定品牌</span>
                                    </label>
                                </div>
                            </div>

                            <div id="scopeDetails" style="display: none;">
                                <button type="button" onclick="selectScope()" 
                                        class="w-full bg-gray-100 text-gray-600 py-2 px-3 rounded-lg text-sm hover:bg-gray-200 transition-colors border border-dashed border-gray-300">
                                    点击选择适用范围
                                </button>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">用户限制</label>
                                <div class="space-y-2">
                                    <label class="flex items-center text-sm">
                                        <input type="checkbox" id="newUserOnly" class="mr-2 text-purple-500 focus:ring-purple-500">
                                        <span class="text-gray-700">仅限新用户</span>
                                    </label>
                                    <label class="flex items-center text-sm">
                                        <input type="checkbox" id="memberOnly" class="mr-2 text-purple-500 focus:ring-purple-500">
                                        <span class="text-gray-700">仅限会员用户</span>
                                    </label>
                                    <label class="flex items-center text-sm">
                                        <input type="checkbox" id="vipOnly" class="mr-2 text-purple-500 focus:ring-purple-500">
                                        <span class="text-gray-700">仅限VIP用户</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Usage Limits -->
                <div class="bg-white border-b border-gray-200">
                    <div class="px-4 py-4">
                        <h3 class="font-medium mb-4 flex items-center">
                            <i class="fas fa-shield-alt text-orange-500 mr-2"></i>
                            使用限制
                        </h3>
                        
                        <div class="space-y-4">
                            <div class="grid grid-cols-2 gap-3">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">每人每日限享</label>
                                    <div class="flex items-center">
                                        <input type="number" id="dailyLimit" min="0" placeholder="3" 
                                               class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                        <span class="ml-2 text-sm text-gray-600">次</span>
                                    </div>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">活动期间限享</label>
                                    <div class="flex items-center">
                                        <input type="number" id="totalLimit" min="0" placeholder="10" 
                                               class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                        <span class="ml-2 text-sm text-gray-600">次</span>
                                    </div>
                                </div>
                            </div>

                            <div>
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" id="stackable" class="mr-2 text-purple-500 focus:ring-purple-500">
                                    <span class="text-gray-700">可与优惠券叠加使用</span>
                                </label>
                                <p class="text-xs text-gray-500 mt-1 ml-6">开启后用户可同时使用优惠券和满减优惠</p>
                            </div>

                            <div>
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" id="excludeShipping" class="mr-2 text-purple-500 focus:ring-purple-500">
                                    <span class="text-gray-700">运费不参与满减计算</span>
                                </label>
                                <p class="text-xs text-gray-500 mt-1 ml-6">仅商品金额参与满减条件计算</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Marketing Settings -->
                <div class="bg-white border-b border-gray-200">
                    <div class="px-4 py-4">
                        <h3 class="font-medium mb-4 flex items-center">
                            <i class="fas fa-bullhorn text-red-500 mr-2"></i>
                            营销推广
                        </h3>
                        
                        <div class="space-y-4">
                            <div>
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" id="showOnHomepage" class="mr-2 text-purple-500 focus:ring-purple-500">
                                    <span class="text-gray-700">首页活动横幅展示</span>
                                </label>
                                <p class="text-xs text-gray-500 mt-1 ml-6">活动将在首页重要位置展示</p>
                            </div>

                            <div>
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" id="cartReminder" checked class="mr-2 text-purple-500 focus:ring-purple-500">
                                    <span class="text-gray-700">购物车满减提醒</span>
                                </label>
                                <p class="text-xs text-gray-500 mt-1 ml-6">在购物车页面提醒用户满减优惠</p>
                            </div>

                            <div>
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" id="pushNotification" class="mr-2 text-purple-500 focus:ring-purple-500">
                                    <span class="text-gray-700">活动开始推送通知</span>
                                </label>
                                <p class="text-xs text-gray-500 mt-1 ml-6">活动开始时推送给目标用户</p>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">推广文案</label>
                                <textarea id="promoText" rows="2" placeholder="满减活动进行中，买得越多省得越多！"
                                          class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent resize-none text-sm"></textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Activity Preview -->
                <div class="bg-white">
                    <div class="px-4 py-4">
                        <h3 class="font-medium mb-4 flex items-center">
                            <i class="fas fa-eye text-indigo-500 mr-2"></i>
                            活动预览
                        </h3>
                        
                        <div class="bg-gradient-to-r from-purple-50 to-pink-50 rounded-lg p-4 border border-purple-200">
                            <div class="flex items-center mb-3">
                                <span class="bg-gradient-to-r from-purple-500 to-pink-500 text-white text-xs px-2 py-1 rounded-full font-medium">
                                    <i class="fas fa-gift mr-1"></i>满减活动
                                </span>
                                <span class="ml-2 text-xs text-gray-600">进行中</span>
                            </div>
                            <h4 id="previewName" class="text-sm font-medium mb-2 text-gray-800">活动名称将在这里显示</h4>
                            <div id="previewRules" class="space-y-1">
                                <div class="text-xs text-purple-600 bg-white bg-opacity-50 rounded px-2 py-1">
                                    满¥0减¥0
                                </div>
                            </div>
                            <div class="mt-2 text-xs text-gray-600">
                                <i class="fas fa-clock mr-1"></i>
                                <span id="previewTime">活动时间：待设置</span>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <!-- Bottom Actions -->
        <div class="absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4">
            <div class="flex gap-3">
                <button onclick="saveDraft()" class="flex-1 bg-gray-100 text-gray-700 py-3 rounded-lg font-medium hover:bg-gray-200 transition-colors">
                    保存草稿
                </button>
                <button onclick="createActivity()" class="flex-1 bg-gradient-to-r from-purple-500 to-pink-500 text-white py-3 rounded-lg font-medium hover:opacity-90 transition-opacity shadow-lg">
                    创建活动
                </button>
            </div>
        </div>
    </div>

    <script>
        let ruleCounter = 1;

        // Form preview updates
        document.getElementById('activityName').addEventListener('input', function() {
            document.getElementById('previewName').textContent = this.value || '活动名称将在这里显示';
        });

        document.getElementById('startTime').addEventListener('change', updateTimePreview);
        document.getElementById('endTime').addEventListener('change', updateTimePreview);

        function updateTimePreview() {
            const startTime = document.getElementById('startTime').value;
            const endTime = document.getElementById('endTime').value;
            
            if (startTime && endTime) {
                const start = new Date(startTime);
                const end = new Date(endTime);
                document.getElementById('previewTime').textContent = 
                    `活动时间：${start.toLocaleDateString('zh-CN')} - ${end.toLocaleDateString('zh-CN')}`;
            } else {
                document.getElementById('previewTime').textContent = '活动时间：待设置';
            }
        }

        // Product scope selection toggle
        document.querySelectorAll('input[name="productScope"]').forEach(radio => {
            radio.addEventListener('change', function() {
                const scopeDetails = document.getElementById('scopeDetails');
                if (this.value !== 'all') {
                    scopeDetails.style.display = 'block';
                } else {
                    scopeDetails.style.display = 'none';
                }
            });
        });

        // Discount rules management
        function addDiscountRule() {
            ruleCounter++;
            const rulesContainer = document.getElementById('discountRules');
            const newRule = document.createElement('div');
            newRule.className = 'discount-rule bg-gray-50 rounded-lg p-3 border border-gray-200';
            newRule.innerHTML = `
                <div class="flex items-center justify-between mb-3">
                    <span class="text-sm font-medium text-gray-700">第${ruleCounter}阶梯</span>
                    <button type="button" onclick="removeDiscountRule(this)" class="text-red-500 hover:text-red-700 text-sm">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">满足金额</label>
                        <div class="flex items-center">
                            <span class="text-sm text-gray-600 mr-1">¥</span>
                            <input type="number" class="min-amount flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" 
                                   min="0" step="0.01" placeholder="${199 + (ruleCounter - 2) * 100}" onchange="updatePreview()">
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">减免金额</label>
                        <div class="flex items-center">
                            <span class="text-sm text-gray-600 mr-1">¥</span>
                            <input type="number" class="discount-amount flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" 
                                   min="0" step="0.01" placeholder="${20 + (ruleCounter - 2) * 10}" onchange="updatePreview()">
                        </div>
                    </div>
                </div>
            `;
            
            rulesContainer.appendChild(newRule);
            updatePreview();
        }

        function removeDiscountRule(button) {
            const rule = button.closest('.discount-rule');
            rule.remove();
            updateRuleNumbers();
            updatePreview();
        }

        function updateRuleNumbers() {
            const rules = document.querySelectorAll('.discount-rule');
            rules.forEach((rule, index) => {
                rule.querySelector('span').textContent = `第${index + 1}阶梯`;
            });
            ruleCounter = rules.length;
        }

        function updatePreview() {
            const rules = document.querySelectorAll('.discount-rule');
            const previewRules = document.getElementById('previewRules');
            
            previewRules.innerHTML = '';
            
            rules.forEach(rule => {
                const minAmount = rule.querySelector('.min-amount').value;
                const discountAmount = rule.querySelector('.discount-amount').value;
                
                if (minAmount && discountAmount) {
                    const ruleDiv = document.createElement('div');
                    ruleDiv.className = 'text-xs text-purple-600 bg-white bg-opacity-50 rounded px-2 py-1';
                    ruleDiv.textContent = `满¥${minAmount}减¥${discountAmount}`;
                    previewRules.appendChild(ruleDiv);
                } else {
                    const ruleDiv = document.createElement('div');
                    ruleDiv.className = 'text-xs text-purple-600 bg-white bg-opacity-50 rounded px-2 py-1';
                    ruleDiv.textContent = '满¥0减¥0';
                    previewRules.appendChild(ruleDiv);
                }
            });
        }

        function selectScope() {
            const productScope = document.querySelector('input[name="productScope"]:checked').value;
            let scopeType = '';
            
            switch(productScope) {
                case 'category':
                    scopeType = '商品分类';
                    break;
                case 'specific':
                    scopeType = '具体商品';
                    break;
                case 'brand':
                    scopeType = '商品品牌';
                    break;
            }
            
            showToast(`选择适用${scopeType}`);
            // In a real app, this would open a selection modal
        }

        function viewTemplates() {
            showToast('查看满减模板');
            // In a real app, this would show template options
        }

        // Form actions
        function saveDraft() {
            const formData = gatherFormData();
            showToast('满减活动草稿已保存');
        }

        function createActivity() {
            const formData = gatherFormData();
            
            // Basic validation
            if (!formData.activityName) {
                showToast('请输入活动名称');
                return;
            }
            
            if (!formData.startTime || !formData.endTime) {
                showToast('请设置活动时间');
                return;
            }
            
            if (formData.discountRules.length === 0 || !formData.discountRules.some(rule => rule.minAmount && rule.discountAmount)) {
                showToast('请设置至少一个满减规则');
                return;
            }

            // Success simulation
            showToast('满减活动创建成功！');
            
            setTimeout(() => {
                window.location.href = 'b2b-marketing.html';
            }, 1500);
        }

        function gatherFormData() {
            const rules = document.querySelectorAll('.discount-rule');
            const discountRules = Array.from(rules).map(rule => ({
                minAmount: rule.querySelector('.min-amount').value,
                discountAmount: rule.querySelector('.discount-amount').value
            }));

            const productScope = document.querySelector('input[name="productScope"]:checked').value;
            
            return {
                activityName: document.getElementById('activityName').value,
                startTime: document.getElementById('startTime').value,
                endTime: document.getElementById('endTime').value,
                description: document.getElementById('description').value,
                discountRules: discountRules,
                productScope: productScope,
                newUserOnly: document.getElementById('newUserOnly').checked,
                memberOnly: document.getElementById('memberOnly').checked,
                vipOnly: document.getElementById('vipOnly').checked,
                dailyLimit: document.getElementById('dailyLimit').value,
                totalLimit: document.getElementById('totalLimit').value,
                stackable: document.getElementById('stackable').checked,
                excludeShipping: document.getElementById('excludeShipping').checked,
                showOnHomepage: document.getElementById('showOnHomepage').checked,
                cartReminder: document.getElementById('cartReminder').checked,
                pushNotification: document.getElementById('pushNotification').checked,
                promoText: document.getElementById('promoText').value
            };
        }

        // Toast notification
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            // Set default times
            const now = new Date();
            const tomorrow = new Date(now.getTime() + 24 * 60 * 60 * 1000);
            const nextWeek = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000);
            
            document.getElementById('startTime').value = tomorrow.toISOString().slice(0, 16);
            document.getElementById('endTime').value = nextWeek.toISOString().slice(0, 16);
            
            updateTimePreview();
            updatePreview();
        });
    </script>
</body>
</html>